<template>
  <div class="userSetting">
    <p class="iptwrap">修改密码</p>
    <p class="iptwrap">当前用户：{{ userInfo.nickname }}</p>
    <p class="iptwrap">
      <span><sup class="require">*</sup>新密码：</span>
      <el-input
        v-model="sizeForm.newPwd"
        type="password"
        placeholder="密码包含 数字,英文,字符中的两种以上，长度6-20"
        show-password
        class="iptwidth"
      />
    </p>
    <p class="iptwrap">
      <span><sup class="require">*</sup>确认密码：</span>
      <el-input
        v-model="sizeForm.confirmPwd"
        type="password"
        placeholder="密码包含 数字,英文,字符中的两种以上，长度6-20"
        show-password
        class="iptwidth"
      />
    </p>
    <p class="iptwrap">
      <el-button @click="cancelChange">取消</el-button>
      <el-button type="primary" @click="confirmChangePwd">确定</el-button>
    </p>
  </div>
</template>

<script >
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
import { changePwd } from '@/api/system/user/index.ts';
import { Storage } from '@/utils/Storage';
import { ElMessage, ElMessageBox } from 'element-plus';
import { PUBLIC_KEY } from '@/utils/common';
import { JSEncrypt } from '@/utils/jsencrypt';
import conf from "@/config/index.js"
const userInfo = JSON.parse(Storage.get('USERINFO'));
export default defineComponent({
  setup() {
    const state = reactive({
      userInfo,
      sizeForm: {
        newPwd: '',
        confirmPwd: '',
      },
    });
    const confirmChangePwd = () => {
      var reg1 = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/;
      if (!state.sizeForm.newPwd || !state.sizeForm.confirmPwd) {
        ElMessage({
          message: '请输入密码',
          type: 'warning',
        });
        return;
      }
      if (state.sizeForm.newPwd !== state.sizeForm.confirmPwd) {
        ElMessage({
          message: '两次密码要输入一致',
          type: 'warning',
        });
        return;
      }
      if (!reg1.test(state.sizeForm.newPwd)) {
        ElMessage({
          message: '密码包含 数字,英文,字符中的两种以上，长度6-20',
          type: 'warning',
        });
        return;
      }
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(PUBLIC_KEY);
      let jmnewPwd = encrypt.encrypt(state.sizeForm.newPwd);
      let jmconfirmPwd = encrypt.encrypt(state.sizeForm.confirmPwd);
      changePwd({
        newPwd:jmnewPwd,
        confirmPwd:jmconfirmPwd
      }).then((res) => {
        Storage.clear();

        ElMessage({
          message: '修改成功,请重新登录',
          type: 'success',
        });
        window.location.href = conf.LOGIN_URL
        window.location.reload();
      });
    };
    const cancelChange = () => {
      state.sizeForm = {
        newPwd: '',
        confirmPwd: '',
      };
    };
    onMounted(() => {});
    return {
      ...toRefs(state),
      confirmChangePwd,
      cancelChange,
    };
  },
});
</script>
<style lang="less" scoped>
.userSetting {
  .iptwrap {
    margin-bottom: 15px;
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
      .require {
        color: #f5222d;
      }
    }
    .iptwidth {
      width: 60%;
    }
    :deep(.el-input__inner) {
      color: #333 !important;
    }
  }
}
</style>
